<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>注册页面</title>
	<link rel="stylesheet" href="new/css/auth.css">
</head>

<body>
<div class="lowin" id="registerContent">
	<div class="lowin-brand">
		<img src="new/images/kodinger.jpg" alt="logo">
	</div>
	<div class="lowin-wrapper">
		<div class="lowin-box lowin-login">
			<div class="lowin-box-inner">
				<div v-model="user" >
					<div class="lowin-group">
						<label>昵称</label>
						<input type="text" autocomplete="请输入昵称" v-model="user.nickName" id="nickname" name="nickname" class="lowin-input">
					</div>
					<div class="lowin-group">
						<label>邮箱账户</label>
						<input type="email" autocomplete="请输入邮箱" id="email" v-model="user.account" name="email" class="lowin-input">
					</div>
					<div class="lowin-group">
						<label>手机号</label>
						<input type="email" autocomplete="请输入手机号" id="phone" name="phone" v-model="user.phone" class="lowin-input">
					</div>
					<div class="lowin-group password-group">
						<label>密码</label>
						<input type="password" name="password" id="password" v-model="user.pwd" autocomplete="current-password" class="lowin-input">
					</div>
					<div class="lowin-group password-group">
						<label>确认密码</label>
						<input type="password" name="password1" id="password1" autocomplete="current-password" class="lowin-input">
					</div>
					<div class="lowin-group password-group">
						<label>系统身份</label>
						<el-radio-group v-model="user.type">
							<el-radio :label="0">用户</el-radio>
							<el-radio :label="1">家政人员</el-radio>
						</el-radio-group>
					</div>
					<button class="lowin-btn login-btn" @click="subRegister()">
						注册
					</button>
					<div class="text-foot">
						You have an account? <a href="Login.html" class="register-link">登录</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<footer class="lowin-footer">
	Copyright &copy; 2020.From graduation project.
</footer>
</div>


<script src="js/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<script>


var vm = new Vue({
	el : "#registerContent",
	data : {
		user:{
			"nickName":'',
			"account":'',
			"pwd":'',
			"type" : 0
		}
	},

	methods : {
		subRegister: function () {
			var vms = this;
			if ($("#nickname").val().length <= 0) {
				layer.msg("昵称不为空!", {icon: 2, time: 1500});
				return false;
			}
			if ($("#email").val().length <= 0) {
				layer.msg("邮箱不为空!", {icon: 2, time: 1500});
				return false;
			}
			if ($("#password").val().length <= 0) {
				layer.msg("第一次密码不为空!", {icon: 2, time: 1500});
				return false;
			}
			if ($("#password1").val().length <= 0) {
				layer.msg("第二次密码不为空!", {icon: 2, time: 1500});
				return false;
			}
			if ($("#password1").val() != $("#password").val()) {
				layer.msg("两次密码不相同!", {icon: 2, time: 1500});
				return false;
			}
			var reg = /^(?![^a-zA-Z]+$)(?!\D+$).{8,15}$/;
			if (!reg.test(vms.user.pwd)) {
				layer.msg("字母+数字组合,至少包含一个字母和数字,长度控制在8-15", {icon: 2, time: 1500});
				return false;
			}
			if (!(/^1[3456789]\d{9}$/.test(vms.user.phone))) {
				layer.msg("手机号码有误，请重填", {icon: 2, time: 1500});
				return false;
			}
			const user={
				"nickName":vm.user.nickName,
				"account":vm.user.account,
				"pwd":vm.user.pwd,
				"type": vm.user.type
			};
			$.ajax({
				url: "/user/register",
				type: "POST",
				contentType: 'application/json',
				dataType: 'json',
				data: JSON.stringify(user),
				success: function (res) {
					if (res.result == true) {
						layer.msg("注册成功，快去登录吧",{icon:1,time:1500},function () {
							location.href = "Login.html";
						});
					} else {
						layer.msg("用户名已经被占用了，请重新输入",{icon:2,time:1500});
						return false;
					}

				}
			});
		}
	}
});
</script>

</body>
</html>
